import {designPage} from "@peryl/react-compose";
import {Plc, PlcIndex, Table, iTableNode, calcRowSpans, calcColSpans, calcSpans, TablePropsCellStyleFunc, Space} from "plain-design";
import {notNull} from "@peryl/utils/notNull";
import {DemoRow} from "../../common/DemoRow";

const DemoRowSpan = designPage(() => {

  /*演示的数据，目标位合并行，临接的行字段值相等则合并行*/
  const data = [
    { first: '1', second: '1-1', third: '1-1-1' },
    { first: '1', second: '1-1', third: '1-1-2' },
    { first: '1', second: '1-1', third: '1-1-3' },
    { first: '1', second: '1-2', third: '1-2-1' },
    { first: '1', second: '2-1', third: '1-3-1' },
    { first: '2', second: '2-1', third: '2-1-1' },
    { first: '2', second: '2-1', third: '2-1-2' },
    { first: '2', second: '2-2', third: '2-2-1' },
  ] as Record<string, string>[];

  const rowSpans = calcRowSpans(data, ['first', 'second']);

  // console.log(JSON.parse(JSON.stringify(resultSpanMap)))

  function spanMethod({ node, plc }: { node: iTableNode, plc: any }) {
    return {
      colspan: 1,
      rowspan: notNull(rowSpans[node.state.index][plc.props.field], 1),
    };
  }

  return () => (
    <DemoRow title="合并行——字段值相同则合并行">
      <Space vertical>
        <ul>
          {data.map((row, index) => (
            <li key={index}>
              {JSON.stringify(row)}
            </li>
          ))}
        </ul>
        <Table data={data} spanMethod={spanMethod} border>
          <PlcIndex/>
          <Plc title={'一级标题'} field={'first'}/>
          <Plc title={'二级标题'} field={'second'}/>
          <Plc title={'三级标题'} field={'third'}/>
        </Table>
      </Space>
    </DemoRow>
  );

});

const DemoColSpan = designPage(() => {

  const data = [
    { name: '产品线A', first: '盈利', second: '盈利', third: '亏损', fourth: '亏损', },
    { name: '产品线B', first: '盈利', second: '亏损', third: '亏损', fourth: '亏损', },
    { name: '产品线C', first: '盈利', second: '盈利', third: '盈利', fourth: '亏损', },
    { name: '产品线D', first: '亏损', second: '亏损', third: '亏损', fourth: '亏损', },
    { name: '产品线E', first: '盈利', second: '盈利', third: '盈利', fourth: '盈利', },
  ];

  const colSpans = calcColSpans(data, ['first', 'second', 'third', 'fourth']);

  function spanMethod({ node, plc }: { node: iTableNode, plc: any }) {
    return {
      rowspan: 1,
      colspan: notNull(colSpans[node.state.index][plc.props.field], 1)
    };
  }

  return () => (
    <DemoRow title="合并列——字段值相同则合并列">
      <Space vertical>
        <ul>
          {data.map((item, index) => (
            <li key={index}>{JSON.stringify(item)}</li>
          ))}
        </ul>
        <Table data={data} spanMethod={spanMethod} border>
          <PlcIndex/>
          <Plc title="产品线" field="name"/>
          <Plc title="第一季度盈亏" field="first"/>
          <Plc title="第二季度盈亏" field="second"/>
          <Plc title="第三季度盈亏" field="third"/>
          <Plc title="第四季度盈亏" field="fourth"/>
        </Table>
      </Space>
    </DemoRow>
  );
});

const DemoSpan = designPage(() => {

  const data = [
    { category: '1', subCategory: '1-1', name: '1-1-1', s1: '盈利', s2: '盈利', s3: '亏损', s4: '亏损', },
    { category: '1', subCategory: '1-1', name: '1-1-2', s1: '盈利', s2: '亏损', s3: '亏损', s4: '亏损', },
    { category: '1', subCategory: '1-1', name: '1-1-3', s1: '盈利', s2: '盈利', s3: '盈利', s4: '亏损', },
    { category: '1', subCategory: '1-2', name: '1-2-1', s1: '盈利', s2: '盈利', s3: '盈利', s4: '盈利', },
    { category: '1', subCategory: '2-1', name: '1-3-1', s1: '亏损', s2: '亏损', s3: '亏损', s4: '亏损', },
    { category: '2', subCategory: '2-1', name: '2-1-1', s1: '亏损', s2: '盈利', s3: '亏损', s4: '亏损', },
    { category: '2', subCategory: '2-1', name: '2-1-2', s1: '盈利', s2: '盈利', s3: '亏损', s4: '盈利', },
    { category: '2', subCategory: '2-2', name: '2-2-1', s1: '亏损', s2: '亏损', s3: '盈利', s4: '盈利', },
  ] as Record<string, string>[];

  const spans = calcSpans(data, { rowSpanFields: ['category', 'subCategory'], colSpanFields: ['s1', 's2', 's3', 's4'] });

  function spanMethod({ node, plc }: { node: iTableNode, plc: any }) {
    return {
      rowspan: notNull(spans[node.state.index].row?.[plc.props.field], 1)!,
      colspan: notNull(spans[node.state.index].col?.[plc.props.field], 1)!,
    };
  }

  const cellStyleFunc: TablePropsCellStyleFunc = (node, plc) => {
    const field = plc.props.field;
    const val = !field ? null : node.data[field];
    if (!!field && ['s1', 's2', 's3', 's4'].indexOf(field) > -1) {
      return val == '亏损' ? { backgroundColor: '#4CD263', color: 'white' } : { backgroundColor: '#F98981', color: 'white' };
    }
    return {};
  };

  return () => (
    <DemoRow title="合并行列——手动">
      <Space vertical>
        <ul>
          {data.map((item, index) => (
            <li key={index}>{JSON.stringify(item)}</li>
          ))}
        </ul>
        <Table data={data} spanMethod={spanMethod} border cellStyleFunc={cellStyleFunc}>
          <PlcIndex/>
          <Plc title="大类" field="category"/>
          <Plc title="小类" field="subCategory"/>
          <Plc title="产品" field="name"/>
          <Plc title="第一季度盈亏" field="s1"/>
          <Plc title="第二季度盈亏" field="s2"/>
          <Plc title="第三季度盈亏" field="s3"/>
          <Plc title="第四季度盈亏" field="s4"/>
        </Table>
      </Space>
    </DemoRow>
  );
});

const DemoAutoSpan = designPage(() => {

  const data = [
    { category: '1', subCategory: '1-1', name: '1-1-1', s1: '盈利', s2: '盈利', s3: '亏损', s4: '亏损', },
    { category: '1', subCategory: '1-1', name: '1-1-2', s1: '盈利', s2: '亏损', s3: '亏损', s4: '亏损', },
    { category: '1', subCategory: '1-1', name: '1-1-3', s1: '盈利', s2: '盈利', s3: '盈利', s4: '亏损', },
    { category: '1', subCategory: '1-2', name: '1-2-1', s1: '盈利', s2: '盈利', s3: '盈利', s4: '盈利', },
    { category: '1', subCategory: '2-1', name: '1-3-1', s1: '亏损', s2: '亏损', s3: '亏损', s4: '亏损', },
    { category: '2', subCategory: '2-1', name: '2-1-1', s1: '亏损', s2: '盈利', s3: '亏损', s4: '亏损', },
    { category: '2', subCategory: '2-1', name: '2-1-2', s1: '盈利', s2: '盈利', s3: '亏损', s4: '盈利', },
    { category: '2', subCategory: '2-2', name: '2-2-1', s1: '亏损', s2: '亏损', s3: '盈利', s4: '盈利', },
  ] as Record<string, string>[];

  const cellStyleFunc: TablePropsCellStyleFunc = (node, plc) => {
    const field = plc.props.field;
    const val = !field ? null : node.data[field];
    if (!!field && ['s1', 's2', 's3', 's4'].indexOf(field) > -1) {
      return val == '亏损' ? { backgroundColor: '#4CD263', color: 'white' } : { backgroundColor: '#F98981', color: 'white' };
    }
    return {};
  };

  return () => (
    <DemoRow title="合并行列——自动">
      <Space vertical>
        <ul>
          {data.map((item, index) => (
            <li key={index}>{JSON.stringify(item)}</li>
          ))}
        </ul>
        <Table data={data} border cellStyleFunc={cellStyleFunc}>
          <PlcIndex/>
          <Plc title="大类" field="category" autoRowSpan/>
          <Plc title="小类" field="subCategory" autoRowSpan/>
          <Plc title="产品" field="name"/>
          <Plc title="第一季度盈亏" field="s1" autoColSpan/>
          <Plc title="第二季度盈亏" field="s2" autoColSpan/>
          <Plc title="第三季度盈亏" field="s3" autoColSpan/>
          <Plc title="第四季度盈亏" field="s4" autoColSpan/>
        </Table>
      </Space>
    </DemoRow>
  );
});


export default () => {
  return (
    <>
      <DemoRowSpan/>
      <DemoColSpan/>
      <DemoSpan/>
      <DemoAutoSpan/>
    </>
  );
}
